import React, { useEffect } from 'react';

import echarts from "echarts";

export type MapProps = {
    style?: React.CSSProperties
};

const Monitoring: React.FC<MapProps> = (props) => {

    const { style } = props

    useEffect(() => {

        const myChart = echarts.init(document.getElementById('monitor'));

        var option;

        option = {
            grid: [
                {left: '0', top: '0', right: '0', bottom: '0'},
            ],
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                    type: 'pie',
                    radius: [0, '30%'],
                    label: {
                        position: 'inner',
                        padding: [-45, 0, 0, 0],
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 335, name: '1' },
                    ]
                },
                {
                    type: 'pie',
                    radius: ['32%', '50%'],
                    label: false,
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 25, name: '百度' },
                        { value: 25, name: '谷歌' },
                        { value: 25, name: '必应' },
                    ]
                }
            ]
        };

        option && myChart.setOption(option);

        window.addEventListener('resize', function () {
            myChart.resize();
        });

    }, []);

    return (
        <div id='monitor' style={style}></div>
    );

};

export default Monitoring;